<script  lang="ts">
    import * as service from "@/api/lj_api";
    import { ref,onMounted,defineExpose } from "vue";
    import { ElNotification } from 'element-plus'
    import axios from "axios";
    import type { UploadProps } from 'element-plus'
export default{
    props:['row','index'],
   setup(prop,{emit}){
        const {BMapGL} = window as any;
        onMounted(async ()=>{
            var map = new BMapGL.Map("map");
            //设置坐标
            var point = new BMapGL.Point(116.404, 39.915);
            //地图实例化
            map.centerAndZoom(point, 8);
        })
        //隐藏显示
        var flag = ref(false);
        //新增左侧表单
        var ruleForm:any = ref({deviceNum:'yy',deviceType:'yy',runningTime:'2022-6-6 6:6:6',runningStatus:'1',operator:'1',telephone:'1'})
        //新增左侧表单约束
        var rules = {
        deviceId:{required: true, message: 'deviceId', trigger: 'bulr'},
        deviceNum:{required: true, message: 'deviceNum', trigger: 'bulr'},
        deviceType:{required: true, message: 'deviceType', trigger: 'bulr'},
        runningTime:{required: true, message: 'runningTime', trigger: 'bulr'},
        runningStatus:{required: true, message: 'runningStatus', trigger: 'bulr'},
        operator:{required: true, message: 'operator', trigger: 'bulr'},
        telephone:{required: true, message: 'telephone', trigger: 'bulr'},
        }
        //新增右侧表单
        var ruleFormRight =ref({position:'1',localPic:'1',devicePic:'1',manufacturer:'1',productionTime:'2022-6-6 6:6:6',productVerson:''});
        //新增右侧表单约束
        var rulesRight = {
        position:{required: true, message: 'position', trigger: 'bulr'},//位置
        localPic:{required: true, message: 'localPic', trigger: 'bulr'},//本地图片
        devicePic:{required: true, message: 'devicePic', trigger: 'bulr'},//设备图片
        manufacturer:{required: true, message: 'manufacturer', trigger: 'bulr'},//生产商
        productionTime:{required: true, message: 'productionTime', trigger: 'bulr'},//生产时间
        productVerson:{required: true, message: 'productVerson', trigger: 'bulr'},//产品版本
        }
        //上传照片
        var imageUrl = ref();
        const beforeUpload: UploadProps['beforeUpload'] = (file) =>{
            let fd = new FormData();
            fd.append('file',file)
            const obj = {name:file.name,file}
            axios.post('http://101.42.253.49',fd,{
                headers:{
                    'Content-Type':'multipart/form-data'
                }
            }).then(res=>{
                imageUrl.value = res.data;
            }).catch(res=>{
                    
            })
            imageUrl.value = file;
        }
        //保存
        var save = async ()=>{
            var res;
            if(prop.index == 1){
                res = await service.sixth.device_add({...ruleForm.value,...ruleFormRight.value});
            }else if(prop.index == 2){

            }else{
            }
            //   if(res.data)
            ElNotification.success({message: '保存成功'})
            cancel();
            //显示列表页面
            emit('hide');
            emit('getdata')
        }
        //取消-hide
        var cancel = ()=>{
            flag.value  = false; 
            emit('hide');
        }
        //隐藏-show
        var show = ()=>{
            flag.value  = true;
            // ruleForm.value={deviceNum:'',deviceType:'',runningTime:'',runningStatus:'',operator:'',telephone:''}
            // ruleFormRight.value={position:'',localPic:'',devicePic:'',manufacturer:'',productionTime:'',productVerson:''}
        }
        //回显
        var huixian = ()=>{
            flag.value  = true;
            for(let item in ruleForm.value){
                if(prop.row[item] != undefined){
                    ruleForm.value[item] = prop.row[item];
                }
            }
            for(let item in ruleFormRight.value){
                if(prop.row[item] != undefined){
                    ruleFormRight.value[item] = prop.row[item];
                }
            }
            defineExpose({
                show,huixian
            })
        }
        return {
            save,imageUrl,rulesRight,ruleFormRight,rules,ruleForm,flag,cancel,show,huixian,beforeUpload
        }
   }
}
</script>
<template>
    <div class="addBtn" v-show="flag">
        <div class="addDv">
            <div class="left">
                <h3>设备基本信息</h3>
                <el-form :rules="rules" :model="ruleForm" class="form">
                    <el-form-item label="设备名称：" prop="deviceNum">
                        <el-input v-model="ruleForm.deviceId" />
                    </el-form-item>
                    <el-form-item label="设备编号：" prop="deviceId">
                        <el-input v-model="ruleForm.deviceNum" />
                    </el-form-item>
                    <el-form-item label="设备型号：" prop="deviceType">
                        <el-select v-model="ruleForm.deviceType" placeholder="ISS20200816">
                            <el-option label="ISS20200816" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="runningTime" label="运行时间：">
                        <el-input v-model="ruleForm.runningTime" placeholder="2022-01-23 11:21:23" />
                    </el-form-item>
                    <el-form-item label="运行状态：" prop="runningStatus">
                        <el-select v-model="ruleForm.runningStatus" placeholder="正常">
                            <el-option label="正常" value="1" />
                            <el-option label="禁用" value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="&nbsp;&nbsp;&nbsp;跟进人：" prop="operator">
                        <el-input v-model="ruleForm.operator" />
                    </el-form-item>
                    <el-form-item label="联系方式：" prop="telephone">
                        <el-input v-model="ruleForm.telephone" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="right">
                <h3>设备详细信息</h3>
                <el-form ref="ruleFormRef" :model="ruleFormRight" :rules="rulesRight" class="form">
                    <div class="Riglfet">
                        <div class="top">
                            <el-form-item label="安装位置：" prop="position" class="position">
                                <div>
                                    <el-input v-model="ruleFormRight.position" />
                                </div>
                                <el-icon size="28" class="maap">
                                    <Location />
                                </el-icon>
                            </el-form-item>
                        </div>
                        <div id="map">
                            地图
                        </div>
                    </div>
                    <div class="Rigright">
                        <div class="top">
                            <el-form-item label="现场图片：" prop="localPic">
                            </el-form-item>
                            <el-upload class="avatar-uploader"
                                action=""
                                :before-upload="beforeUpload"
                                list-type="picture"
                                >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                        <div class="bottom">
                            <el-form-item label="设备图片：" prop="devicePic">
                            </el-form-item>
                            <el-upload class="avatar-uploader"
                                action=""
                                >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="btns">
            <el-button type="primary" size="large" class="save" @click="save">保存</el-button>
            <el-button size="large" @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/saas/Table.scss';
@import '@/saas/DeviceManager.scss';
</style>